<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title></title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.mui-input-range .mui-tooltip {
				
			}
			
			.mui-input-range input[type='range']::-webkit-slider-thumb {
				width: 15px;
				height: 15px;
				background-color: #00D5C5;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">伴奏名</h1>
			<a onclick="showdialog()" class="mui-btn mui-icon mui-icon-bars mui-btn-link mui-pull-right" style="padding-top:0px;color: white;">
			</a>
		</header>
		<div class="mui-content fill-all flex v-flex">
			<div class="flex-1 flex v-flex">
				<div class="flex">
					<div class="text-center" style="width: 100%;">
						-----stone----------
					</div>
					
				</div>
				<div class="flex-1 flex h-center v-center">
						<img src="../img/bg-01.png" />
						自定义速度
					</div>
			</div>
			<div class="opera" style="padding-bottom: 30px;">
				<div class="flex v-center">
					<div class="flex-1 mui-text-right" style="margin-right: 10px;">
						00:00
					</div>
					<div class="text-center" style="width: 60%;margin: 0px auto;">
						<div class="mui-input-row mui-input-range">
							<input id="range" type="range" min="0" max="270" value="0">
						</div>
					</div>
					
					<div class="flex-1 mui-text-left">
						00:00
					</div>
				</div>
				<div class="flex" style="margin: 0px auto;width: 70%;">
					<div>
						<img src="../img/refresh.png" style="width: 40px;height: 40px;" />
					</div>
					<div class="flex-1 flex h-center">
						<img src="../img/starts.png" style="width: 40px;height: 40px" />
					</div>
					<div>
						<img src="../img/star.png" style="width: 40px;height: 40px" />
					</div>
				</div>
			</div>
		</div>
		<style>
			.dialog-foder{
				position: absolute;
				bottom: 0px;
				height:250px;
				width: 100%;
				background: rgba(0,0,0,0.5);
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				visibility: hidden;
				
			}
			.mui-table-view{
				background: none;
				border: none;
				height: 200px;
				overflow: scroll;
			}
			.mui-table-view:before{
				background: none;
			}
			.mui-table-view:after{
				background: none;
			}
			
			.mui-table-view .mui-table-view-cell{
				border: none;
				color: white;
			}
		</style>
		<div id="dialog-foder" class="dialog-foder">
			<ul class="mui-table-view flex-1">
			        <li class="mui-table-view-cell">
			        	<!--itemstart-->
			            <div class="flex">
			            	<div class="flex-1 flex v-center">
			            		<div>
			            			伴奏鸣
			            		</div>
			            		<div>
			            		<img src="../img/musicing.png" style="width: 30px;"/>
			            	</div>
			            	</div>
			            	<div>
			            		<img src="../img/star.png" style="width: 30px;"/>
			            	</div>
			            </div>
			            <!--itemend-->
			        </li>
			        <li class="mui-table-view-cell">
			        	<!--itemstart-->
			            <div class="flex">
			            	<div class="flex-1 flex v-center">
			            		<div>
			            			伴奏鸣
			            		</div>
			            		<div>
			            		<img src="../img/musicing.png" style="width: 30px;"/>
			            	</div>
			            	</div>
			            	<div>
			            		<img src="../img/star.png" style="width: 30px;"/>
			            	</div>
			            </div>
			            <!--itemend-->
			        </li>
			        <li class="mui-table-view-cell">
			        	<!--itemstart-->
			            <div class="flex">
			            	<div class="flex-1 flex v-center">
			            		<div>
			            			伴奏鸣
			            		</div>
			            		<div>
			            		<img src="../img/musicing.png" style="width: 30px;"/>
			            	</div>
			            	</div>
			            	<div>
			            		<img src="../img/star.png" style="width: 30px;"/>
			            	</div>
			            </div>
			            <!--itemend-->
			        </li>
			        <li class="mui-table-view-cell">
			        	<!--itemstart-->
			            <div class="flex">
			            	<div class="flex-1 flex v-center">
			            		<div>
			            			伴奏鸣
			            		</div>
			            		<div>
			            		<img src="../img/musicing.png" style="width: 30px;"/>
			            	</div>
			            	</div>
			            	<div>
			            		<img src="../img/star.png" style="width: 30px;"/>
			            	</div>
			            </div>
			            <!--itemend-->
			        </li>
			        <li class="mui-table-view-cell">
			        	<!--itemstart-->
			            <div class="flex">
			            	<div class="flex-1 flex v-center">
			            		<div>
			            			伴奏鸣
			            		</div>
			            		<div>
			            		<img src="../img/musicing.png" style="width: 30px;"/>
			            	</div>
			            	</div>
			            	<div>
			            		<img src="../img/star.png" style="width: 30px;"/>
			            	</div>
			            </div>
			            <!--itemend-->
			        </li>
			        <li class="mui-table-view-cell">
			        	<!--itemstart-->
			            <div class="flex">
			            	<div class="flex-1 flex v-center">
			            		<div>
			            			伴奏鸣
			            		</div>
			            		<div>
			            		<img src="../img/musicing.png" style="width: 30px;"/>
			            	</div>
			            	</div>
			            	<div>
			            		<img src="../img/star.png" style="width: 30px;"/>
			            	</div>
			            </div>
			            <!--itemend-->
			        </li>
			    </ul>
			    <div onclick="closedialog()" class=" flex v-center h-center" style="height:50px;color: white;">关闭</div>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script>
			var r = document.getElementById("range");
			r.addEventListener("change",function(){
				alert(r.value);
			});
			function showdialog(){
				document.getElementById("dialog-foder").style.visibility="visible";
			}
			function closedialog(){
				
				document.getElementById("dialog-foder").style.visibility="hidden";
			}
		</script>
	</body>

</html>